<template>
	<view class="content_view">	
		<!-- <topicon class="topicon" :iconWidth="100" :iconHeight="100" :startPostion="3" iconPath="../../../../static/img/zhiding.png"
				 :marginBottom="10" :marginTop="60" :marginLeft="5" :marginRight="10" @tapIcon="tapIcon"
				></topicon> -->
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" :title="'维保任务详情'"></u-navbar>
		<uc-content :loading="loading">
			<view class="list-item">
				<view class="list-bottom">
					<view>任务名称:</view>
					<view>{{maintenanceTaskInfo.title}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>维保人员:</view>
					<view>{{maintenanceTaskInfo.userName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>业主名称:</view>
					<view>{{maintenanceTaskInfo.enterpriseName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>维保企业:</view>
					<view>{{maintenanceTaskInfo.maintenaceEnterpriseName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>任务状态:</view>
					<view>{{maintenanceTaskInfo.status| maintenanceTaskStatus}}</view>
				</view>
			</view>
			<view class="list-item">
				<view style="font-size: 20px;text-align: center;color: red;margin-top: 10px;margin-bottom: 10px;">还需巡检触发{{maintenanceTaskInfo.needMonthEquNum}}个年度维保设备</view>
			</view>
			<uni-collapse accordion >
				<uni-collapse-item :title="title" class="collapse-title" :open="true">	
					<view class="list-item" v-for="(value, key) in maintenanceTaskInfo.inMaintenanceInfoDataVoList" :key="key">
						<view class="list-top">
							<view class="list-left">{{ value.name + ' 已完成' + value.zwcs + '个/需要完成' + value.zs + '个' }}</view>
						</view>
						<view class="list-center u-line-1">
							<view class="list-right">本月已完成{{value.dywczs}}个/本月需要完成{{value.xywcs}}个 											

						</view>
						<u-button @click="checkItem(value)" type="primary" shape="square" style="margin-right: 5px; width: 20%; float: right; height: 30px;line-height: 30px; font-size: 12px;">查看详情</u-button></view>
					</view>
					<!-- <uni-collapse accordion v-for="(value, key) in maintenanceTaskInfo.inMaintenanceInfoDataVoList" :key="key" @change="collapseChange(value)">
						
						<uni-collapse-item :title="value.name + ' 已完成' + value.zwcs + '个/需要完成' + value.zs + '个'" class="collapse-title">
							<view class="list-item" style="color: red;"></view>
							<view class="list-item" v-for="(item,index) in vinMaintenanceInfoDataList" :key="index">
								<view class="list-top" >
									<view class="list-left">设备名称: {{ item.name }}</view>
								</view> 
								<view class="list-center u-line-3">
									<view>地点: {{ item.address}}</view>
									<view>设备编码: {{item.code}}</view>
									<view >维保状态: {{statusFormat(item.status)}} 
											<u-button v-if="item.status != '40'" @click=" (item.ucId, item.equipmentId)" :disabled="item.status == '40' || maintenanceTaskInfo.status != 4" type="primary" shape="square" style="width: 20%; float: right; margin-top: -25px; height: 30px;line-height: 30px; font-size: 12px;">上报隐患</u-button>	
											<u-button v-if="(item.isvideo=='01' || item.isvideo=='10') && item.status != '40'" @click="recording(item.ucId)" :disabled="(item.status != '01' && item.isvideo=='01') || (item.status != '20' && item.isvideo=='10') || maintenanceTaskInfo.status != 4" type="primary" shape="square" style="margin-right: 5px; width: 20%; float: right; margin-top: -25px; height: 30px;line-height: 30px; font-size: 12px;">拍摄视频</u-button>	
									</view>
									<view v-if="item.status == '01' && item.isvideo == '30' && item.mark" style="color: red;">
										{{item.mark}}
									</view>
								</view>
								<view class="list-bottom">
								</view>
							</view> 
						</uni-collapse-item>
					</uni-collapse>-->
				</uni-collapse-item>
			</uni-collapse>
			
			<uni-collapse accordion >
				<uni-collapse-item title="月度维保设备" class="collapse-title">	
				<view class="list-item" v-for="(value, key) in maintenanceTaskInfo.inMonthDataVoList" :key="key">
					<view class="list-top">
						<view class="list-left">{{ value.month + ' 已完成' + value.overCount + '个/需要完成' + value.neddCount + '个' }}</view>
					</view>
					<view class="list-bottom">
						<view></view>
						<view style="width: 80%;">
							<u-button @click="checkItemM(value)" type="primary" shape="square" style="margin-right: 5px; width: 20%; float: right; height: 30px;line-height: 30px; font-size: 12px;">查看详情</u-button>
						</view>
					</view>
				</view>
					<!-- <uni-collapse accordion v-for="(value, key) in maintenanceTaskInfo.inMonthDataVoList" :key="key">
						<uni-collapse-item :title="value.month + ' 已完成' + value.overCount + '个/需要完成' + value.neddCount + '个'" class="collapse-title">	
							<view class="list-item" v-for="(item,index) in value.inMaintenanceInfoDataList" :key="index">
								<view class="list-top" >
									<view class="list-left">设备名称: {{ item.name }}</view>
								</view> 
								<view class="list-center u-line-4">
									<view>地点: {{ item.address}}</view>
									<view>设备编码: {{item.code}}</view>
									<view >维保状态: {{statusFormat(item.status)}} 
										<u-button @click="reportHiddenDanger(item.ucId, item.equipmentId)" :disabled="item.status == '40' || maintenanceTaskInfo.status != 4" type="primary" shape="square" style="width: 20%; float: right; margin-top: -25px; height: 30px;line-height: 30px; font-size: 12px;">上报隐患</u-button>	
										<u-button v-if="(item.isvideo=='01' || item.isvideo=='10') && item.status != '40'" @click="recording(item.ucId)" :disabled="(item.status != '01' && item.isvideo=='01') || (item.status != '20' && item.isvideo=='10') || maintenanceTaskInfo.status != 4" type="primary" shape="square" style="margin-right: 5px; width: 20%; float: right; margin-top: -25px; height: 30px;line-height: 30px; font-size: 12px;">拍摄视频</u-button>	
									</view>
									<view v-if="item.status == '01' && item.isvideo == '30' && item.mark" style="color: red;">
										{{item.mark}}
									</view>
								</view>
								<view class="list-bottom">
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse> -->
				</uni-collapse-item>
			</uni-collapse>
		<view style="width:100%;margin-top: 15px; margin-left: 2.5%;">
			<view style="width:95%;">
				<u-button v-if="maintenanceTaskInfo.status==1 " @click="startTask(ucId)" type="primary" shape="square">确定任务</u-button>
				<u-button v-if="maintenanceTaskInfo.status==2 " @click="startExecute(ucId)" type="primary" shape="square">开始执行</u-button>
				<u-button v-if="maintenanceTaskInfo.monthComplete && this.maintenanceTaskInfo.status==4" @click="completeTask(ucId)" type="primary" shape="square">结束本次维保</u-button>
				<u-button v-if="maintenanceTaskInfo.yearComplete && (this.maintenanceTaskInfo.status==3 || this.maintenanceTaskInfo.status==4) " @click="endTask(ucId)" type="primary" shape="square">已完成</u-button>
				<!-- <u-button  @click="reportHiddenDanger()" v-if="this.maintenanceTaskInfo.status>1" type="primary" shape="square" style="margin-top: 15px;">上报隐患</u-button> -->
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
		    <uni-popup-message style="width: 90%;margin-left: 5%;border-radius: 5px;" type="error" :message="tipMessage"></uni-popup-message>
		</uni-popup>
		
	</uc-content>
	</view>
</template>

<script>
	import topicon from '@/components/gwh-backTopIcon/gwh-backTopIcon.vue'
	import { mapGetters } from 'vuex'
	export default {
		components:{
			topicon
		},
		data() {
			return {
				maintenanceTaskInfo: {},
				vinMaintenanceInfoDataList: [],
				statusOptions: [],
				ucId:'',
				tipMessage: '',
				num:0,
				taskId:"",
				loading:false,
				title: ""
			}
		},
		onLoad(e) {
				this.ucId=e.ucId	
		},
		onShow() {
			this.initView(this.ucId)
		},
		computed:{
		        ...mapGetters(["refresh"])
		},
		watch: {
		    refresh: function (a, b) {
			  this.initView(this.ucId)
		    }
		},
		methods: {
			checkItem(value) {
				console.log(value)
				uni.navigateTo({
					url:'/pages/index/workorder/task/completeEqList?maintenanceId='+this.maintenanceTaskInfo.ucId + '&typeCode=' + value.code + '&isvideo=' + value.inMaintenanceInfoDataList[0].isvideo
				})
			},
			checkItemM(value) {
				uni.navigateTo({
					url:'/pages/index/workorder/task/completeEqList?maintenanceId='+this.maintenanceTaskInfo.ucId + '&executeTime=' + value.month
				})
			},
			collapseChange(value) {
				this.vinMaintenanceInfoDataList = value.inMaintenanceInfoDataList
			},
			tapIcon(e){
				//此处为处理方法
				uni.pageScrollTo({
					duration:60,
					scrollTop:0
				})
			},
			statusFormat(data) {
				return this.selectDictLabel(this.statusOptions, data);
			},
			initView(val) {
				this.loading = true
				this.maintenanceTaskInfo = {}
				this.pageNum = 0
				this.getInMaintenanceInfoVo(val)
				this.getDicts("equip_main_status").then(response => {
				    this.statusOptions = response.data.data;
				});
			},
			recording(ucId){
				window.native.MaintenanceRecordVideo({ucId:ucId, maintenanceId: this.maintenanceTaskInfo.ucId},res => {
					this.getInMaintenanceInfoVo(this.ucId)
				});
			},
			getInMaintenanceInfoVo(val) {
				this.utils.request("/api/app/maintenanceRecord/getInMaintenanceInfoVo", {ucId: val}, "post", "app", true).then(res => {
					this.maintenanceTaskInfo = res.data
					this.title = "年度维保设备 已完成" + this.maintenanceTaskInfo.overEquNum + "个/需要完成" + this.maintenanceTaskInfo.totalEquNum + "个"
					this.loading=false
				}).catch(error => {
					this.loading=false
					console.log(error)
				})
			},
			//开始任务
			startTask(val) {
				this.utils.request("/api/app/maintenanceRecord/startMaintenanceTask", {ucId: val}, "post", "app", true).then(res => {
					this.getInMaintenanceInfoVo(this.ucId)
					
				}).catch(error => {
					console.log(error)
				})
			},
			//结束本次任务
			completeTask(val) {
				this.utils.request("/api/app/maintenanceRecord/completeTask", {ucId: val}, "post", "app", true).then(res => {
					this.getInMaintenanceInfoVo(this.ucId)
					
				}).catch(error => {
					console.log(error)
				})
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			startExecute(val){
				this.utils.request("/api/app/maintenanceRecord/startExecute", {ucId: val}, "post", "app", true).then(res => {
					console.log(res.data)
					if(res.data.code == 200){
					 	this.getInMaintenanceInfoVo(this.ucId)
					} else{
						this.tipMessage = res.data.msg
						this.open()
					}
					this.getInMaintenanceInfoVo(this.ucId)
				}).catch(error => {
					console.log(error)
				})
			},
			endTask(val){
				this.utils.request("/api/app/maintenanceRecord/updateEnd", {ucId: val}, "post", "app", true).then(res => {
					this.getInMaintenanceInfoVo(this.ucId)
				}).catch(error => {
					console.log(error)
				})
			},
			reportHiddenDanger(mainDataId, equipmentId){
				uni.navigateTo({
				    url: '/pages/index/workorder/maintenance/maintenanceHiddenDanger?ucId='+this.maintenanceTaskInfo.ucId + "&equipmentId=" + equipmentId + "&mainDataId=" + mainDataId
				});
			},
			compileEq(){
				uni.navigateTo({
					url:'/pages/index/workorder/task/completeEqList?ucId='+this.maintenanceTaskInfo.enterpriseId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uview-ui/libs/css/style.components.scss";
	
	.list-item {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-bottom: #999999 1px dashed ;
	
		.list-bottom {
			display: flex;
			margin-top: 10rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #333;
		}
		.list-center {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
	.collapse-title{
		padding: 0px 9px;
	}
	.uni-collapse-cell--open{
		background-color: #FFFFFF !important;
	}
	 .topicon >>> .icon{
	        border: #4CD964 2upx solid;
	    }
</style>
